<template>
	<div class="page">
		<div class="page-inner">
			<div class="page-ctx-wrap">
				<div class="input-items">
					<div class="section-title">优惠码信息</div>
					<div class="input-item">
						<div class="input-box">
							<div class="label required">优惠码标题</div>
							<div class="val">
								<el-input clearable="" v-model="form.title" placeholder=""> </el-input>
							</div>
						</div>
					</div>
					<div class="input-item">
						<div class="input-box">
							<div class="label required">优惠码</div>
							<div class="val">
								<el-input clearable="" v-model="form.code" placeholder=""> </el-input>
							</div>
						</div>
					</div>

					<div class="input-item">
						<div class="input-box">
							<div class="label required">使用时间</div>
							<div class="val">
								<div class="groups flex">
									<el-date-picker clearable="" v-model="form.startTime" type="datetime"
										format="yyyy-MM-dd" value-format="yyyy-MM-dd" placeholder="选择开始日期">
									</el-date-picker>

									<span class="time-divider">-</span>

									<el-date-picker clearable="" v-model="form.endTime" type="datetime"
										format="yyyy-MM-dd" value-format="yyyy-MM-dd" placeholder="选择结束日期">
									</el-date-picker>
								</div>

							</div>
						</div>
					</div>

					<div class="input-item">
						<div class="input-box">
							<div class="label required">状态</div>
							<div class="val">
								<el-radio-group v-model="form.status">
									<el-radio :label="1">启用</el-radio>
									<el-radio :label="0">禁用</el-radio>
								</el-radio-group>
							</div>
						</div>
					</div>

					<div class="input-item">
						<div class="input-box">
							<div class="label required">优惠金额</div>
							<div class="val">
								<el-input clearable="" v-model="form.money" placeholder=""> </el-input>
							</div>
						</div>
					</div>


					<div class="input-item">
						<div class="input-box">
							<div class="label ">使用门槛金额</div>
							<div class="val">
								<el-input clearable="" v-model="form.man" placeholder=""> </el-input>
							</div>
						</div>
					</div>
					<div class="input-item">
						<div class="input-box">
							<div class="label ">描述内容</div>
							<div class="val">
								<el-input clearable="" v-model="form.content" placeholder=""> </el-input>
							</div>
						</div>
					</div>
					<div class="input-item">
						<div class="input-box">
							<div class="label ">每人限领数量</div>
							<div class="val">
								<el-input clearable="" v-model="form.numLimit" placeholder=""> </el-input>
								<div>
									(不限填0)
								</div>
							</div>
						</div>
					</div>
					<div class="input-item">
						<div class="input-box">
							<div class="label ">发放总数量</div>
							<div class="val">
								<el-input clearable="" v-model="form.num" placeholder=""> </el-input>
							</div>
						</div>
					</div>
					<div class="input-item">
						<div class="input-box">
							<div class="label ">已发放数量</div>
							<div class="val">
								<el-input clearable="" v-model="form.hasNum" placeholder=""> </el-input>
							</div>
						</div>
					</div>

					<div class="input-item">
						<div class="input-box">
							<div class="label ">会员等级</div>
							<div class="val">
								<el-select clearable="" v-model="vip_levels_select" multiple placeholder="请选择">
									<el-option v-for="item in vip_levels" :key="item.id" :label="item.title"
										:value="item.id">
									</el-option>
								</el-select>
							</div>
						</div>
					</div>
					<!-- <div class="input-item">
						<div class="input-box">
							<div class="label ">指定门店</div>
							<div class="val">

							</div>
						</div>
					</div> -->

					<div class="input-item">
						<div class="input-box">
							<div class="label ">产品分类</div>
							<div class="val">
								<!-- <el-input v-model="form.hasNum" placeholder=""> </el-input> -->
								<product_cate_cascader ref="product_cate_cascader" @confirm="confirm_product_cate" />
							</div>
						</div>
					</div>

					<div class="input-item">
						<div class="input-box">
							<div class="label ">指定产品</div>
							<div class="val">
								<div class="add-box">
									<el-button type="primary" @click="do_add_product()"> 增加商品 </el-button>
								</div>

							</div>
						</div>
					</div>



					<div class="table-wrap">

						<div class="table-box">
							<el-table ref="multipleTable" :data="list_product" fit stripe highlight-current-row
								min-width="100px" style="width: 100%" @selection-change="handleSelectionChange1">
								<el-table-column type="selection" width="55"> </el-table-column>

								<el-table-column label="图片" width="80px">
									<template slot-scope="scope">
										<span class="cus-poster">
											<!-- <img :src="'https://omo-oss-image.thefastimg.com/' + scope.row.image_2b5N8b00" alt="" class="cate-poster" /> -->
											<el-image style="width: 30px; height: 30px" :src="scope.row.thumb"
												:preview-src-list="[scope.row.thumb]">
											</el-image>
										</span>
									</template>
								</el-table-column>
								<el-table-column label="产品名称">
									<template slot-scope="scope">
										<span>{{ scope.row.title }}</span>
									</template>
								</el-table-column>
								<el-table-column label="产品规格">
									<template slot-scope="scope">
										<span>{{ scope.row.keyVals }}</span>
									</template>
								</el-table-column>
								<el-table-column label="分类">
									<template slot-scope="scope">
										<span class="cus-miaoshu">{{ scope.row.channelTitle }}</span>
									</template>
								</el-table-column>
								<el-table-column label="零售价">
									<template slot-scope="scope">
										<span class="cus-miaoshu">{{ scope.row.priceSale }}</span>
									</template>
								</el-table-column>

								<el-table-column fixed="right" label="操作" width="50px">
									<template slot-scope="scope">
										<el-link type="primary" @click="product_remove(scope.row)">移除</el-link>
									</template>
								</el-table-column>
							</el-table>
						</div>

					</div>


					<!-- <div class="input-item">
						<div class="input-box">
							<div class="label required">每人限领</div>
							<div class="val">
								<el-radio-group v-model="form.name" class="column">
									<el-radio :label="0">不限</el-radio>
									<el-radio :label="1">
										限制领取
										<span class="tip-input">
											<el-input v-model="form.name" placeholder="">
												<template slot="append">张</template>
											</el-input>
										</span>
									</el-radio>
								</el-radio-group>
							</div>
						</div>
					</div> -->

					<!-- 		<div class="section-title">优惠券规则</div>
					<div class="input-item">
						<div class="input-box">
							<div class="label required">使用门槛</div>
							<div class="val">
								<el-radio-group v-model="menkan" class="column">
									<el-radio :label="0">不限</el-radio>
									<el-radio :label="1">
										订单满
										<span class="tip-input">
											<el-input v-model="form.consumptionAmount" placeholder="">
												<template slot="append">元</template>
											</el-input>
										</span>
										可用
									</el-radio>
								</el-radio-group>
							</div>
						</div>
					</div> -->


					<!-- <div class="input-item">
						<div class="input-box">
							<div class="label" style="visibility: hidden">-</div>
							<div class="val">
								<div class="save-box">
									<el-button type="primary" @click="toSave()"> 保存 </el-button>
								</div>
							</div>
						</div>
					</div> -->
				</div>
			</div>
		</div>

		<div class="footer-actions">
			<el-button type="" @click="toBack()"> 取消 </el-button>
			<el-button type="primary" @click="doSubmit()"> 保存 </el-button>
		</div>


		<!-- <product_choose_modal ref="product_choose_modal" @confirm="confirm_choose_product" /> -->
		<product_guige_choose_modal ref="product_guige_choose_modal" @confirm="confirm_choose_guige" />
	</div>
</template>

<script>
import product_cate_cascader from '@/components/product/product_cate_cascader.vue'
// import product_choose_modal from '@/components/product/product_choose_modal.vue'
import product_guige_choose_modal from '@/components/product/product_guige_choose_modal.vue'


import {
	mapState
} from "vuex";
export default {
	name: "coupon-form",
	components: {
		product_cate_cascader,
		// product_choose_modal,
		product_guige_choose_modal,
	},
	data() {
		return {
			id: this.$route.query.id || '',
			form: {
				"title": "",
				"code": "",
				"money": "",
				"man": "",
				"color": "",
				"content": "",
				"numLimit": "",
				"num": "",
				"hasNum": "",
				"originalPic": "",
				"startTime": "",
				"endTime": "",
				"channels": "",
				"channelNames": "",
				"pdts": "",
				"pdtNames": "",
				"levelIds": "",
				"mendianIds": "",
				"status": ""
			},

			vip_levels: [],
			vip_levels_select: [],


			list_product: [],
		};
	},
	computed: {},
	watch: {
		'form.startTime'(value) {
			this.$log('优惠券信息', value)
		},
		vip_levels_select(value) {
			this.$log('已选会员级别', value)
			this.form.levelIds = value.join(",")
		},
	},
	created() {
		this.query_config()
		this.setView();
	},
	mounted() {

	},
	methods: {
		setView() {
			this.$api({
				url: '/admin_service.php',
				method: 'get',
				data: {
					action: "yhqCode_getInfo",
					id: this.id,
				}
			}).then((res) => {
				if (res.code == 200) {
					let data = res.data;
					this.form = {
						"title": data.title,
						"code": data.code,
						"money": data.money,
						"man": data.man,
						"color": data.color,
						"content": data.content,
						"numLimit": data.numLimit,
						"num": data.num,
						"hasNum": data.hasNum,
						"originalPic": data.originalPic,
						"startTime": data.startTime,
						"endTime": data.endTime,
						"channels": data.channels,
						"channelNames": data.channelNames,
						"pdts": data.pdts,
						"pdtNames": data.pdtNames,
						"levelIds": data.levelIds,
						"mendianIds": data.mendianIds,
						"status": data.status,
					}

					if (data.levelIds) {
						this.vip_levels_select = data.levelIds.split(',').map(v => parseInt(v)).filter(v => !!v)
					}

					if (data.customCategoryIds) {
						this.$refs.product_cate_cascader.init(JSON.parse(data.customCategoryIds))
					}

					if (data.productList) {
						this.list_product = data.productList
					}
				}
			})
		},

		query_config() {
			this.query_user_level()
			this.query_store_list()
			this.query_product_cate()
		},

		query_user_level() {
			this.$api({
				url: '/admin_service.php',
				method: 'get',
				data: {
					action: "setting_getLevelList",
					page: 1,
					pageNum: 100
				}
			}).then((res) => {
				if (res.code == 200) {
					let list = res.data.list;
					this.vip_levels = list;
				}
			})

		},
		query_store_list() {

		},
		query_product_cate() {

		},
		confirm_product_cate(info) {
			// this.$log('')
			this.form.customCategoryIds = JSON.stringify(info.value)
			this.form.channelNames = info.cate_title_list.join(',')
		},

		do_add_product() {
			// this.$refs.product_choose_modal.init()
			this.$refs.product_guige_choose_modal.init()
		},
		confirm_choose_guige(items) {
			this.$log('追加已选商品', items)

			let new_items = JSON.parse(JSON.stringify(items))
			new_items.forEach(v => {
				v.limitNum = '';
				v.price = '';
			})
			this.list_product = this.list_product.concat(new_items)
		},

		confirm_choose_product(items) {
			this.$log('追加已选商品', items)

			let new_items = JSON.parse(JSON.stringify(items))
			new_items.forEach(v => {
				v.limitNum = '';
				v.price = '';
			})
			this.list_product = this.list_product.concat(new_items)
		},
		handleSelectionChange1(items) {
			console.log("已选产品", items);
			this.select_items = items;
		},
		product_remove(row) {
			let index = this.list_product.findIndex(v => v.id == row.id)
			this.list_product.splice(index, 1)
		},


		doSubmit() {
			let pdts = this.list_product.map(v => v.id)
			let pdtNames = this.list_product.map(v => v.title)

			let params = {
				action: "yhqCode_save",
				...this.form,
				id: this.id,

				pdts: pdts.join(','),
				pdtNames: pdtNames.join(',')
			}
			this.$api({
				url: '/admin_service.php',
				method: 'get',
				data: params
			}).then((res) => {
				if (res.code == 200) {
					this.toBack()
					this.$message({
						message: res.msg,
						type: 'success'
					})
				} else {
					alertErr(res.msg)
				}
			})
		},
	},
};
</script>

<style scoped lang="less">
.footer-actions {
	display: flex;
	justify-content: flex-end;
	justify-content: center;
	position: fixed;
	z-index: 100;
	bottom: 0;
	right: 0;
	left: 230px;
	padding: 10px;
	background: #fff;
	box-shadow: 0 0 1px 0 #ccc;
	// padding-right: 35px;
	margin-right: 18px;
}



.tip-input {
	margin-left: 10px;
	margin-right: 10px;
	display: inline-block;
	max-width: 150px;
}

.time-divider {
	margin: 0 15px;
}

.page {
	.page-inner {}
}

.page-ctx-wrap {
	background: #fff;
	padding: 20px;
	border-radius: 6px;

	padding-bottom: 100px;
}

.section-title {
	margin-bottom: 20px;
	width: 100%;
	height: auto;
	line-height: 46px;
	background: rgb(241, 242, 245);
	padding-left: 30px;
	font-size: 16px;
	font-weight: 600;
}

.input-items {
	// .flex();
	// flex-wrap: wrap;
	padding-bottom: 0px;

	.input-item {
		margin-bottom: 20px;
		width: 100%;
		max-width: 800px;
		// width: 50%;

		&.hidden-item {
			display: none;
		}

		&:last-child {
			margin-bottom: 0;
		}

		.input-box {
			width: 100%;
			display: flex;
			align-items: flex-start;

			.label {
				height: 32px;
				line-height: 32px;
				min-width: 160px;
				min-width: 100px;
				text-align: right;
				margin-right: 40px;
				font-size: 20px;
				font-size: 14px;
				font-family: PingFang SC;
				color: #666666;

				&.required {
					position: relative;

					&:after {
						content: "*";
						color: #f00;
						position: absolute;
						right: -15px;
						top: 3px;
						// font-weight: bold;
					}
				}
			}
		}

		.val {
			flex: 2;
			font-size: 14px;
			font-family: PingFang SC;
			color: #666666;

			.form-ele {}


			.el-input {
				width: 100%;
			}

			.el-select {
				width: 100%;
			}

			.el-cascader {
				width: 100%;
			}
		}
	}
}
</style>